<style lang="less" scoped>
  @import "../../assets/css/variable.less"; // less变量
  .gray-class{
      color: #999 !important;
      border: 1px solid  #999 !important;
    }
  .course_list {
    position: relative;

    &.have_bottom {
      padding-bottom: 90px;
    }
    .course_list_content {
      padding: 20px 20px 0;
      background: #fff;
      .course_list_title {
        display: flex;
        .flex_left();
        .title {
          font-size: 36px;
          max-width: 75vw;
          white-space:nowrap; //溢出不换行
          overflow:hidden; //超出的文本隐藏
          text-overflow:ellipsis; //溢出用省略号显示
          vertical-align: center; 
        }
        .lesson_info {
          font-size: 26px;
        }
      }
      .course_list_ul {
        width: 100%;
        > li {
          height: 130px;
          border-bottom: 1px solid #F0F0F0;
          .flex_col();
          justify-content: center;
          > .main {
            width: 100%;
            height: 40px;
            .play-icon{
              margin-right: 8px
            }
            .flex_center();
            .pre {
              width: 32px;
              height: 32px;
              line-height: 32px;
              flex: none;
              vertical-align: baseline;
              span {
                font-size: 28px;
              }
            }
            .title {
              width: 0;
              flex: 1;
            }
          }
          > .sub {
            width: 100%;
            height: 34px;
            margin-top: 6px;
            .flex_left();
            .time_process {
              margin-left: 42px;
              color: #999;
              font-size: 24px;
            }
            .tag {
              margin-left: 20px;
              color: #999;
              font-size: 24px;
              border: 1px solid #5B76FF;
              color: #5B76FF;
              padding: 0 6px;
              border-radius: 4px;
            }
          }
        }
      }
    }
    > .bottom_tips {
      width: 100%;
      height: 90px;
      position: absolute;
      left: 0;
      bottom: 0;
      font-size: 24px;
      color: #666;
      display: flex;
      span {
        margin: auto;
      }
    }
  }
</style>

<template>
  <div class="course_list" :class="{have_bottom: courseInfo.totalLessonNum > 1}" >
    <div class="course_list_content">
      <div class="course_list_title" >
        <span class="title" :style="{color:courseInfo.shelveType=='2'?'#999':'#333'}">{{ formPage =='courseDetail'?'课程': courseInfo.title}}</span>
        <span class="lesson_info" :style="{color:courseInfo.shelveType=='2'?'#999':'#FF7A00'}">{{courseInfo | lessonInfoFilter}}</span>
      </div>
      <ul class="course_list_ul">
        <li v-for="(item, index) in courseInfo.lessons" :key="index" @click="enterLiveBack(item)">          
          <div class="main" :style="{color:courseInfo.shelveType=='2'?'#999':'#333'}">
            <van-icon :name="item.vid == vid ?'pause-circle':'play-circle'" class="play-icon" :color = "item.vid == vid ?'#FF7A00':'rgb(204,208,211)'" size="1rem" />            
            <div class="pre" ><span>{{(index + 1)}}.</span></div>
            <div class="title">
              <LoopText :text="item.title" :color="courseInfo.shelveType=='2'?'#999':'#333'" :size="14" />
            </div>
          </div>
          <div class="sub">
            <span class="time_process" >{{item | timeAndProcessFilter(vid)}}</span>
            <!-- v-if="courseWatchRecord && courseWatchRecord[item.courseId] && courseWatchRecord[item.courseId][$route.params.id]" #FF7A00 -->
            <span class="tag"  :class="grayClass" v-if="courseWatchRecord && courseWatchRecord[queryCourseId] && courseWatchRecord[queryCourseId].backId == item.vid ">上次看过</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="bottom_tips" v-if="courseInfo.totalLessonNum > 1"><span>{{(courseInfo.totalLessonNum - courseInfo.hasFinishLessonNum)}}个章节待更新</span></div>
  </div>
</template>

<script>
  import LoopText from '../LoopText.vue';
  import dayjs from 'dayjs';
  import duration from 'dayjs/plugin/duration';
  dayjs.extend(duration);
  export default {
    components: {
      LoopText,
    },
    props: ['courseInfo', 'inRoom','formPage'],
    data() {
      return {
        vid:this.$route.params.id,
        queryCourseId:this.$route.query.courseId,
        courseWatchRecord: localStorage.getItem(`${this.$channel}courseWatchRecord`) ? JSON.parse(localStorage.getItem(`${this.$channel}courseWatchRecord`)) : {},
        grayClass:'',
      }
    },
    created() {
      const {shelveType} = this.courseInfo;  
      if(shelveType == '2'){
          this.grayClass = 'gray-class'
      }
    },
    filters: {
      lessonInfoFilter(courseInfo) {
        const { hasFinishLessonNum, totalLessonNum } = courseInfo;
        if (totalLessonNum && totalLessonNum !== 1) {
          return `（共${hasFinishLessonNum}/${totalLessonNum}）`;
        } else {
          return `（更新至${hasFinishLessonNum > 9 ? hasFinishLessonNum : '0' + hasFinishLessonNum}节）`;
        }
      },
      timeAndProcessFilter(lesson,vid) {
        const { duration, watchProgress , vid : videoId} = lesson;
        if(vid == videoId){
          return '学习中'
        }else{
          return `${watchProgress ? (watchProgress === 0 ? '未开始' : (watchProgress === 100 ? '已学完' : '已学习' + watchProgress )) : '未开始'}` 
        }             
      }
    },
    methods: {
      // 进入课程房间
      enterLiveBack(item) {
        const { priceType , haveBuy , shelveType}  =  this.courseInfo;
        if(shelveType == '2'){
          fun.toastMessage('课程已结束');
          return
      }
        const { vid } = item;
        const { fromPage } = this.$store.state.globalPopupInfo 
        if(vid == this.vid){
            return
        }
        if(priceType){
          if(haveBuy){//付费已购买
            if(fromPage ==='psBackPage'){
                this.$store.commit('setGlobalPopupInfo', {
                ...this.$store.state.globalPopupInfo,
                courseInfo: this.courseInfo,
                show: false,
              })
            }
            this.$router.push(`/${this.$channel}/liveBack/${vid}?dzhPage=true`);           
          }else{//付费未购买
            fun.toastMessage('购买后才能观看',2000);
          }
        }else{//免费都可以观看
          if(fromPage ==='psBackPage'){
                this.$store.commit('setGlobalPopupInfo', {
                ...this.$store.state.globalPopupInfo,
                courseInfo: this.courseInfo,
                show: false,
              })
            }
          this.$router.push(`/${this.$channel}/liveBack/${vid}?dzhPage=true`);
        }
      }
    }
  };
</script>